<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="../js/layui/layui.js" ></script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
}
.layui-table, .layui-table-view {
	margin: 0;
}
.layui-btn {
	background-color: white;
	color: black;
	width: 80px;
	border: 1px solid #eee;
	border-radius: 7px;
}
.layui-btn:hover {
    opacity: unset;
	color: white;
	background: linear-gradient(90deg,#28f5ff,#5382FC);
}
.layui-form-item .layui-input-inline {
	width: 320px;
}
.layui-layer-page .layui-layer-content {
	overflow: visible !important;
}
.layui-layer-page .layui-layer-btn {
	padding-top: 0px !important;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
	showLoginInfo();
	$.ajax({
		url: "../g/service/Sample/getUserId",
		type:'POST',
		cache:false,
		async:false,
		dataType: "json",
		contentType:"application/json",
	    success:function(data){
	    	if(data != 0 && data != 1) {
				window.parent.location.href="../../index.html";
	    	}
	    	userId = data;
	    }
	});
	createTable();
});
//展示登陆用户信息
function showLoginInfo(){
	$.ajax({
		url: '../pv/login/loginInfo',
		type: "get",
		success:function(res){
			result = res;
			if (result != "") {
				$("#login_name").text(result);
			}else {
				$("#login").text("登录/注册");
				window.parent.location.href="login.html";
			}
		}
	})
}
function createTable() {
	layui.use(['table','layer','form'], function(){
		var table = layui.table,layer = layui.layer,form = layui.form;
		var inittable = table.render({
		    elem: '#userTable',
		    height: "full-70",
		    url: '../g/service/Sample/getUserTable',
		    method: "post",
		    contentType: 'application/json',
		    cols: [[ //表头
		        {type: 'checkbox', width:'10%', align: 'center'},
		        {field: 'userid', title: '用户名', hide:true},
		        {field: 'username', title: '登录用户名', width:'20%', align: 'center'},
		      	{field: 'password', title: '密码', width:'30%', align: 'center'},
		      	{field: 'usernamecn', title: '用户中文名', width:'20%', align: 'center'},
		      	{field: 'enableflag', title: '是否启用', width:'20%', align: 'center'}
		    ]]
		});

		form.verify({
			username: function(value, item){ //value：表单的值、item：表单的DOM对象
			  	if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
			    	return '用户名不能有特殊字符';
			    }
			    if(/(^\_)|(\__)|(\_+$)/.test(value)){
			    	return '用户名首尾不能出现下划线\'_\'';
			    }
			    if(/^\d+\d+\d$/.test(value)){
			    	return '用户名不能全为数字';
			    }
			},
			pass: [
			    /^[\S]{1,12}$/
			    ,'密码必须1到12位，且不能出现空格'
			] 
		});
		// 新增用户
		$("#insert").click(function() {
			layer.open({
				type: 1,
				title: "添加用户",
				area: ["450px", "340px"],
				content: $('#layerPanel'),
				closeBtn: 0,
				btn: ['添加', '关闭'],
				success : function(layero, index) { // 成功弹出后回调
					layero.addClass('layui-form');
					layero.attr("lay-filter", "userForm");
					// 将保存按钮改变成提交按钮
					layero.find('.layui-layer-btn0').attr({
						'lay-filter' : 'addUser',
						'lay-submit' : ''
					});
			  		form.val('userForm', {// 清除填写的数据
			  			"userid": "",
				  	    "username": "",
				  	    "password": "",
				  	    "usernamecn": "",
				  		"enableflag": 1
			  	    });
					// 刷新渲染(否则开关按钮会不显示)
					form.render();
				},
			  	yes: function(index, layero){
			  		form.on('submit(addUser)', function(data) {
			  		  	$.ajax({
							url: "../g/service/Sample/insertUser",
							type:'POST',
							cache:false,
							async:false,
							dataType: "json",
							data: JSON.stringify(data.field),
							contentType:"application/json",
						    success:function(data){
						    	if(data.data > 0){
						    		layer.msg("新增成功");
						    		inittable.reload();
							  		layer.close(index);
						    	} else {
						    		if(data.msg){
							    		layer.msg(data.msg)
						    		} else {
							    		layer.msg("新增失败")
						    		}
						    	}
						    }
						});
			  		  	return false;
					});
			  	},
			  	btn2: function(index, layero){
			  		layer.close(index);
			  	}
			});
		});
		// 编辑用户
		$("#update").click(function() {
			var checkStatus = table.checkStatus('userTable');
			if(checkStatus.data.length != 1) {
				layer.msg("请选择一条数据");
				return false;
			}
			layer.open({
				type: 1,
				title: "编辑用户",
				area: ["450px", "340px"],
				content: $('#layerPanel'),
				closeBtn: 0,
				btn: ['编辑', '关闭'],
				success : function(layero, index) { // 成功弹出后回调
					layero.addClass('layui-form');
					layero.attr("lay-filter", "userForm");
					// 将保存按钮改变成提交按钮
					layero.find('.layui-layer-btn0').attr({
						'lay-filter' : 'updateUser',
						'lay-submit' : ''
					});
			  		form.val('userForm', checkStatus.data[0]);
					form.render();
				},
			  	yes: function(index, layero){
			  		form.on('submit(updateUser)', function(data) {
			  		  	$.ajax({
							url: "../g/service/Sample/updateUser",
							type:'POST',
							cache:false,
							async:false,
							dataType: "json",
							data: JSON.stringify(data.field),
							contentType:"application/json",
						    success:function(data){
						    	if(data.data > 0){
						    		layer.msg("编辑成功");
						    		inittable.reload();
							  		layer.close(index);
						    	} else {
						    		if(data.msg){
							    		layer.msg(data.msg)
						    		} else {
							    		layer.msg("编辑失败")
						    		}
						    	}
						    }
						});
			  		  	return false;
					});
			  	},
			  	btn2: function(index, layero){
			  		layer.close(index);
			  	}
			});
		});

		// 删除用户
		$("#delete").click(function() {
			var checkStatus = table.checkStatus('userTable');
			if(checkStatus.data.length == 0) {
				layer.msg("请至少选择一条数据");
				return false;
			}
			layer.confirm('确认删除数据?', {icon: 3, title:'提示'}, function(index){
				$.ajax({
					url: "../g/service/Sample/deleteUser",
					type:'POST',
					cache:false,
					async:false,
					dataType: "json",
					data: JSON.stringify({"data":checkStatus.data}),
					contentType:"application/json",
				    success:function(data){
				    	if(data.data > 0){
				    		layer.msg("删除成功");
				    		inittable.reload();
				    	} else {
				    		if(data.msg){
					    		layer.msg(data.msg)
				    		} else {
					    		layer.msg("删除失败")
				    		}
				    	}
				    }
				});
				layer.close(index);
			});
		});
	});
}
</script>
</head>
<body>
	<div class="layui-btn-container" style="padding: 10px 0px 0px 20px;background-color: #fff;height: 40px;">
		<button class="layui-btn layui-btn-sm" id="insert"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
	    <button class="layui-btn layui-btn-sm" id="update"><i class="layui-icon layui-icon-edit"></i> 编辑</button>
	    <button class="layui-btn layui-btn-sm" id="delete"><i class="layui-icon layui-icon-delete"></i> 删除</button>
	</div>
	<div style="width: 100%;height: calc(100% - 50px);">
		<table class="layui-table" id="userTable" lay-filter="userTable"></table>
	</div>
	<div id="layerPanel" style="width: 450px;height: 220px;display: none;padding-top: 20px;">
    	<input name="userid" type="hidden">
		<div class="layui-form-item">
		    <div class="layui-inline">
				<label class="layui-form-label">登录用户名</label>
			    <div class="layui-input-inline">
			    	<input name="username" lay-verify="username" autocomplete="off" placeholder="请输入登录用户名" class="layui-input">
			    </div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <div class="layui-inline">
				<label class="layui-form-label">密码</label>
			    <div class="layui-input-inline">
			    	<input name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
			    </div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <div class="layui-inline">
				<label class="layui-form-label">中文用户名</label>
			    <div class="layui-input-inline">
			    	<input name="usernamecn" autocomplete="off" placeholder="请输入中文用户名" class="layui-input">
			    </div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <div class="layui-inline">
				<label class="layui-form-label">是否启用</label>
			    <div class="layui-input-inline">
			    	<select name="enableflag">
				        <option value="0">停用</option>
				        <option value="1">启用</option>
			      	</select>
			    </div>
		    </div>
		</div>
	</div>
</body>
</html>